<template>
  <div class="course-recommendation-container">
    <div class="section-header">
      <h2 class="section-title">课程推荐</h2>
      <div class="recommendation-info">
        <el-tooltip content="基于知识图谱和您的学习历史推荐" placement="top">
          <el-icon class="info-icon"><InfoFilled /></el-icon>
        </el-tooltip>
      </div>
    </div>
    
    <div class="recommendation-tabs">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="为您推荐" name="personalized">
          <div class="courses-grid">
            <div 
              v-for="(course, index) in personalizedCourses" 
              :key="index" 
              class="course-card"
              @click="navigateToCourse(course)"
              :style="{ animationDelay: `${index * 0.1}s` }"
            >
              <div class="course-image" :style="{ backgroundImage: `url(${course.image})` }">
                <div class="course-tag" v-if="course.tag">{{ course.tag }}</div>
              </div>
              <div class="course-info">
                <h3 class="course-title">{{ course.title }}</h3>
                <p class="course-description">{{ course.description }}</p>
                <div class="course-meta">
                  <div class="course-stats">
                    <span><el-icon><User /></el-icon> {{ course.students }}人学习</span>
                    <span><el-icon><Star /></el-icon> {{ course.rating }}</span>
                  </div>
                  <div class="course-price" :class="{ free: course.price === '免费' }">
                    {{ course.price }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="热门课程" name="popular">
          <div class="courses-grid">
            <div 
              v-for="(course, index) in popularCourses" 
              :key="index" 
              class="course-card"
              @click="navigateToCourse(course)"
              :style="{ animationDelay: `${index * 0.1}s` }"
            >
              <div class="course-image" :style="{ backgroundImage: `url(${course.image})` }">
                <div class="course-tag" v-if="course.tag">{{ course.tag }}</div>
              </div>
              <div class="course-info">
                <h3 class="course-title">{{ course.title }}</h3>
                <p class="course-description">{{ course.description }}</p>
                <div class="course-meta">
                  <div class="course-stats">
                    <span><el-icon><User /></el-icon> {{ course.students }}人学习</span>
                    <span><el-icon><Star /></el-icon> {{ course.rating }}</span>
                  </div>
                  <div class="course-price" :class="{ free: course.price === '免费' }">
                    {{ course.price }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { User, Star, InfoFilled } from '@element-plus/icons-vue';

const store = useStore();
const router = useRouter();
const activeTab = ref('personalized');

// 从 store 获取课程数据
const personalizedCourses = computed(() => {
  const courses = store.state.home.recommendedCourses?.personalized || [];
  console.log('个性化课程:', courses);
  return courses;
});

const popularCourses = computed(() => {
  const courses = store.state.home.recommendedCourses?.popular || [];
  console.log('热门课程:', courses);
  return courses;
});

// 导航到课程详情页
const navigateToCourse = (course) => {
  router.push(`/course/${course.id}`);
};
</script>

<style lang="scss" scoped>
.course-recommendation-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  margin: 20px 0;
  
  .section-header {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid #ebeef5;
    
    .section-title {
      margin: 0;
      font-size: 18px;
      color: #303133;
    }
    
    .recommendation-info {
      margin-left: 10px;
      
      .info-icon {
        color: #909399;
        cursor: pointer;
      }
    }
  }
  
  .recommendation-tabs {
    padding: 20px;
    
    .courses-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-top: 15px;
      
      .course-card {
        background-color: #fff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
        transition: transform 0.3s, box-shadow 0.3s;
        cursor: pointer;
        animation: fadeIn 0.5s ease-out forwards;
        opacity: 0;
        
        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .course-image {
          height: 160px;
          background-size: cover;
          background-position: center;
          position: relative;
          
          .course-tag {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: rgba(30, 136, 229, 0.8);
            color: #fff;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
          }
        }
        
        .course-info {
          padding: 15px;
          
          .course-title {
            margin: 0 0 10px;
            font-size: 16px;
            color: #303133;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          
          .course-description {
            margin: 0 0 15px;
            color: #606266;
            font-size: 14px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            height: 42px;
          }
          
          .course-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            
            .course-stats {
              display: flex;
              flex-direction: column;
              font-size: 12px;
              color: #909399;
              
              span {
                display: flex;
                align-items: center;
                margin-bottom: 5px;
                
                .el-icon {
                  margin-right: 5px;
                }
              }
            }
            
            .course-price {
              font-weight: bold;
              color: #f56c6c;
              
              &.free {
                color: #67c23a;
              }
            }
          }
        }
      }
    }
  }
}
</style> 